<script lang="ts" setup>
import { useMessage } from "@/hooks/useMessage";
import { SimpleListType, useSimpleList } from "@/hooks/useSimpleList";
import { RoleModel, RolePermission } from "@/model/role";
import { useScreenPixel } from "@/utils/web";
import { FormInstance } from "element-plus";
import { useI18n } from "vue-i18n";
import { roleUrl } from "../modules/roleDesign";
import { userStore } from "@/store/user";

const userState = userStore();

const { t } = useI18n();
const emit = defineEmits(["close", "cancle", "submitForm"]);

const props = defineProps(['show', 'checkeds', 'options'])


const visible = ref(false);
const title = ref("");
const { gtMd } = useScreenPixel();
const model = ref<Partial<RolePermission>>({});

const dialogWidth = computed(() => {
  return gtMd.value ? "50%" : "80%";
});

watch(
  () => props.show,
  (val: any) => {
    if (val) {
      visible.value = true;
    } else {
      visible.value = false;
    }
    
  },
  { immediate: true }
);

watch(
  () => props.checkeds,
  (val: any) => {
    if (val) {
      model.value.checkeds = val;
    }
  },
  { immediate: true }
);

function cancel() {
  emit("cancle");
}

async function submitForm() {
  emit('submitForm', model)
}


defineExpose({
  title: title
});
</script>
<template>
  <el-dialog v-model="visible" :width="dialogWidth" :title="title" @close="cancel">
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{ t("page.common.btn.cancel") }}</el-button>
        <el-button type="primary" @click="submitForm">{{
          t("page.common.btn.confirm")
        }}</el-button>
      </span>
    </template>
    <el-form ref="rolePermissionForm">
      <el-checkbox-group v-for="(item, index) in options" :key="index" v-model="model.checkeds[index]">
        <el-checkbox v-for="(ele, i) in item" :key="i" :label="ele" />
      </el-checkbox-group>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
</style>
